<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码生成</title>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="plugins/jquery-confirm/jquery-confirm.min.css">
    <link rel="stylesheet" href="plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="hadmin/css/animate.css">
    <link rel="stylesheet" href="hadmin/css/style.css">
    <link rel="stylesheet" href="hadmin/css/common.css">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-xs-12">
            <div class="ibox">
                <div class="ibox-content">
                    <form class="form-inline m-b-xs">
                        <div class="form-group">
                            <input type="text" id="tableName" name="tableName" placeholder="输入表名称搜索"
                                   class="form-control">
                            <button id="btn_query" class="btn btn-sm btn-info" type="button"><i
                                    class="fa fa-search"></i> 搜索
                            </button>
                            <button id="btn_reset" class="btn btn-sm btn-danger" type="button"><i
                                    class="fa fa-refresh"></i> 重置
                            </button>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <table id="table" class="table table-striped table-bordered table-hover">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 通用js引入 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/layer/layer.min.js"></script>
<script src="plugins/laydate/laydate.js"></script>
<script src="plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="plugins/validate/jquery.validate.min.js"></script>
<script src="plugins/validate/messages_zh.min.js"></script>
<script src="plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="hadmin/js/content.js"></script>
<script src="hadmin/js/common.js?v=0.9"></script>
<script>
    // 表格参数设置
    $("#table").bootstrapTable({
        url: 'gen/page', // 请求后台的URL（*）
        contentType: "application/x-www-form-urlencoded",// 用post请求，这个是必须条件，必须加上，get可以不用，亲测
        dataType: "json",
        method: "POST", // 请求方式（*）
        //toolbar: '#toolbar', // 工具按钮用哪个容器
        undefinedText: "-", // 为undefined时显示的字
        striped: false, // 是否显示行间隔色
        cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true, // 是否显示分页（*）
        sortable: false, // 是否启用排序
        sortOrder: "asc", // 排序方式
        sortName: "", // 排序名称
        toolbar: '', // 指定工作栏
        loadingFontSize: 13, // 自定义加载文本的字体大小
        // search: true, // 是否使用客户端搜索
        queryParams: queryInitParams,// 传递参数（*）
        responseHandler: responseHandler,
        queryParamsType: "limit",
        sidePagination: "server", // 分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1, // 初始化加载第一页，默认第一页
        pageSize: 10, // 每页的记录行数（*）
        pageList: [10, 20, 50, 100], // 可供选择的每页的行数（*）
        showColumns: false, // 是否显示所有的列
        showRefresh: false, // 是否显示刷新按钮
        minimumCountColumns: 2, // 最少允许的列数
        clickToSelect: true, // 是否启用点击选中行
        strictSearch: true,
        // height: 460, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        showToggle: false, // 是否显示详细视图和列表视图的切换按钮
        uniqueId: "id", // 每一行的唯一标识，一般为主键列
        cardView: false, // 是否显示详细视图
        detailView: false, // 是否显示父子表
        showExport: false, // 是否显示导出
        exportDataType: 'basic', // 'basic', 'all', 'selected'.
        escape: true, // html转义
        // align: "center",
        columns: [
            {
                field: 'tableName',
                title: '表名称',
                align: "center"
            }, {
                field: 'engine',
                title: '数据库类型',
                align: "center"
            },
            {
                field: 'tableComment',
                title: '表备注',
                align: "center"
            },
            {
                field: 'createTime',
                title: '创建时间',
                align: "center"
            },
            {
                field: 'operation',
                title: '操作',
                align: "center",
                formatter: function (value, row, index) {
                    return '<a class="btn btn-info btn-xs" href="gen/code?tables=' + row.tableName + '">生成代码</a>';
                }
            }
        ],
        onLoadSuccess: tableLoadSuccess, // 成功渲染回调
    });

    // 表格查询参数
    function queryInitParams(params) {
        // 这里的键的名字和后端的变量名必须一致
        var temp = {
            limit: params.limit,
            page: (params.offset / params.limit) + 1,
            tableName: $("#tableName").val(),
        };
        return temp;
    }

    // 表格加载成功事件
    function tableLoadSuccess(data) {
        $(".bs-checkbox").css('vertical-align', 'middle');
    }

    // 表格响应数据
    function responseHandler(res) {
        return {
            "total": res.page.totalCount, //总页数
            "rows": res.page.list   //数据
        };
    }

    // 触发搜索
    $("#btn_query").click(function () {
        refreshTable();
    })

    // 重置查询条件
    $("#btn_reset").click(function () {
        $("#tableName").val("");
        refreshTable();
    })

    // 刷新表格
    function refreshTable() {
        var params = $("#table").bootstrapTable('getOptions');
        $("#table").bootstrapTable('refresh', params);
    }
</script>
</body>
</html>
